<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #cvs {
            border: 1px solid #f00;
        }
    </style>
</head>

<body>
    <canvas id="cvs" width="1000" height="400"></canvas>
</body>
<script>
    const cvsDom = document.querySelector('#cvs')

    const context = cvsDom.getContext('2d');

    context.lineWidth = 10;

    // 填充颜色
    // context.fillStyle = 'color | gradient | pattern';
    context.fillStyle = '#f00';

    // 填充矩形
    context.fillRect(10, 10, 300, 100);

    // 绘制描边矩形的方法  (x, y, width, height)
    context.strokeRect(10, 10, 300, 100);
    

    // 注：！！！！
    // 颜色放在上面，会有个边框效果

</script>

</html>